<template>
  <div class="profile-container">
    <el-row justify="center">
      <el-col :xs="24" :sm="20" :md="16" :lg="14" :xl="12">
        <el-card class="profile-card" :body-style="{ padding: isMobile ? '10px' : '20px' }">
          <template #header>
            <div class="card-header">
              <span>个人资料</span>
            </div>
          </template>

          <el-form 
            :model="profile" 
            :rules="rules" 
            ref="profileForm" 
            :label-width="isMobile ? '80px' : '100px'"
            :size="isMobile ? 'large' : 'default'"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="profile.username" disabled />
            </el-form-item>

            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="profile.nickname" />
            </el-form-item>

            <el-form-item label="邮箱" prop="email">
              <el-input v-model="profile.email" />
            </el-form-item>

            <el-form-item label="原密码" prop="oldPassword">
              <el-input v-model="profile.oldPassword" type="password" show-password />
            </el-form-item>

            <el-form-item label="新密码" prop="newPassword">
              <el-input v-model="profile.newPassword" type="password" show-password />
            </el-form-item>

            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input v-model="profile.confirmPassword" type="password" show-password />
            </el-form-item>

            <el-form-item>
              <el-button 
                type="primary" 
                @click="updateProfile"
                :size="isMobile ? 'large' : 'default'"
                style="width: 100%"
              >
                保存修改
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getUserInfo, changePassword } from '@/api/user'

// 添加移动端判断
const isMobile = computed(() => window.innerWidth <= 768)

const profile = reactive({
  username: '',
  nickname: '',
  email: '',
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validatePass = (rule, value, callback) => {
  if (value && value !== profile.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const validatePassword = (rule, value, callback) => {
  if (profile.oldPassword && !value) {
    callback(new Error('请输入新密码'))
  } else if (profile.newPassword && !profile.oldPassword) {
    callback(new Error('请先输入原密码'))
  } else {
    callback()
  }
}

const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  oldPassword: [
    { validator: validatePassword, trigger: 'blur' }
  ],
  newPassword: [
    { validator: validatePassword, trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validatePass, trigger: 'blur' }
  ]
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const userInfo = await getUserInfo()
    profile.username = userInfo.username
    profile.nickname = userInfo.nickname || userInfo.username
    profile.email = userInfo.email
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}

// 更新个人信息
const updateProfile = async () => {
  try {
    if (profile.newPassword) {
      if (!profile.oldPassword) {
        ElMessage.warning('请输入原密码')
        return
      }
      await changePassword({
        old_password: profile.oldPassword,
        new_password: profile.newPassword
      })
      profile.oldPassword = ''
      profile.newPassword = ''
      profile.confirmPassword = ''
      ElMessage.success('密码修改成功')
    }
  } catch (error) {
    ElMessage.error(error.response?.data?.detail || '更新失败')
  }
}

// 初始化数据
onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.profile-container {
  padding: 20px;
  margin-top: 60px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.profile-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .profile-container {
    padding: 10px;
  }
}
</style>
